<template>
  <div>
    <div class="section1">
      <div class="sub-title-1">
        <div class="content">
          <div class="sub-title-1-image"></div>
          <span class="sub-title-1-text">全媒体矩阵传播力</span>
        </div>
        <div class="tab">
          <div
            class="tab-item"
            v-for="(item, index) in tabItems"
            :key="index"
            :class="{ active: activeIndex === index }"
          >
            <div class="image">
              <div class="title" @click="setActive(index)">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section2">
      <!-- 第一排：全年线索 -->
      <div class="annual-clues">
        <div class="label">全年线索</div>
        <div class="digital-container">
          <div
            v-for="(item, index) in formattedAnnualClues"
            :key="index"
            class="digital"
            :class="{ separator: item.type === 'separator' }"
          >
            {{ item.value }}
          </div>
        </div>
        <div class="unit">条</div>
      </div>

      <!-- 第二排：选题线索统计 -->
      <div class="clues-statistics">
        <div v-for="(item, index) in cluesData" :key="index" class="stat-item">
          <div class="stat-content">
            <dv-digital-flop
              :config="digitalConfigs[index]"
              class="stat-number"
            />
            <div class="stat-label">{{ item.title }}</div>
          </div>
          <!-- 分隔线 -->
          <div v-if="index < cluesData.length - 1" class="divider"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
export default {
  components: {},
  data() {
    return {
      activeIndex: 0, // 设置默认活跃项
      tabItems: [{ title: "今日" }, { title: "近7日" }, { title: "近30日" }],
      totalData: [
        { name: "阅读量", trend: "0.05%", number: "25043" },
        { name: "点赞量", trend: "2.40%", number: "980" },
        { name: "转发量", trend: "-28.71%", number: "9485" },
      ],
      // 全年线索数据（实际应该从后台获取）
      annualClues: "8888",
      // 选题线索数据 - 添加颜色配置
      cluesData: [
        { title: "区县报送", count: 20, color: "#1890ff" },
        { title: "部门报送", count: 15, color: "#52c41a" },
        { title: "群众爆料", count: 8, color: "#faad14" },
        { title: "采访需求", count: 12, color: "#722ed1" },
        { title: "其他", count: 5, color: "#13c2c2" },
      ],
      // 数字翻牌器配置 - 直接定义为数组
      digitalConfigs: [],
    };
  },
  computed: {
    // 格式化全年线索数字，添加分隔符
    formattedAnnualClues() {
      const str = this.annualClues.toString();
      const result = [];

      for (let i = 0; i < str.length; i++) {
        result.push({
          type: "digit",
          value: str[i],
        });

        // 在千位后添加分隔符（从右往左数，每3位加一个分隔符）
        if (i < str.length - 1 && (str.length - i - 1) % 3 === 0) {
          result.push({
            type: "separator",
            value: ",",
          });
        }
      }

      return result;
    },
  },
  created() {
    // 初始化数字翻牌器配置
    this.initDigitalConfigs();
  },
  mounted() {
    this.getData();
    // 组件挂载后启动数字动画
    this.startDigitalAnimation();
  },
  methods: {
    getData() {
      currentPOST("centerTopTotalClues")
        .then((res) => {
          if (res.code === 0) {
            this.annualClues = res.data.total*100 || 0;
            this.cluesData = res.data.items || [];
            this.updatePieChart();
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("饼图请求失败:", error);
        });
    },
    setActive(index) {
      this.activeIndex = index; // 设置为当前激活项的索引
    },

    // 初始化数字翻牌器配置
    initDigitalConfigs() {
      this.digitalConfigs = this.cluesData.map((item, index) => {
        return {
          number: [0], // 从0开始
          content: "{nt}",
          style: {
            fontSize: 32,
            fill: item.color,
            fontWeight: "bold",
          },
          formatter: (number) => {
            return parseInt(number).toLocaleString();
          },
        };
      });
    },

    // 启动数字动画
    startDigitalAnimation() {
      // 延迟一下确保组件渲染完成
      setTimeout(() => {
        this.cluesData.forEach((item, index) => {
          // 使用对象解构来触发响应式更新 - 这是关键！
          this.digitalConfigs[index] = {
            ...this.digitalConfigs[index],
            number: [item.count], // 更新为目标值
          };

          // 强制触发数组更新
          this.digitalConfigs.splice(index, 1, this.digitalConfigs[index]);
        });
      }, 1000);
    },

    // 如果需要动态更新数字的方法
    updateNumber(index, newNumber) {
      if (this.digitalConfigs[index]) {
        this.digitalConfigs[index] = {
          ...this.digitalConfigs[index],
          number: [newNumber],
        };
        // 强制触发更新
        this.digitalConfigs.splice(index, 1, this.digitalConfigs[index]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.section1 {
  margin-left: -20px;
  margin-top: 30px;
  margin-right: -200px;
  width: 900px;

  .sub-title-1 {
    display: flex;
    justify-content: space-between;

    .content {
      display: flex;
      align-items: center;

      .sub-title-1-image {
        width: 30px;
        height: 30px;
        background-image: url("../../assets/img/left/section-icon.png");
      }

      .sub-title-1-text {
        width: 128px;
        height: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
    }

    .tab {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: space-evenly;
      padding: 20px 130px;

      .tab-item {
        cursor: pointer;
        display: flex; // 使用flex布局
        align-items: center; // 横向居中
        justify-content: center; // 纵向居中

        .image {
          height: 24px;
          width: 82px;
          background-size: cover;
          background-image: url("../../assets/img/center/top-tab-un.png");
        }

        .title {
          margin-top: -10px;

          font-weight: 400;
          font-size: 12px;
          color: #a6bed2;
        }
      }

      // 激活项样式
      & .tab-item.active {
        .image {
          background-image: url("../../assets/img/center/top-tab-in.png"); // 激活状态的图标
        }

        .title {
          font-weight: 400;
          font-size: 13px;
          color: #ffffff;
        }
      }
    }
  }
}

.section2 {
  margin-top: 40px;
  margin-left: -10px;
  width: 710px;
  height: 151px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 80%;
  background-image: url("../../assets/img/clues/clues-center-top.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  box-sizing: border-box;

  /* 第一排：全年线索 - 放大 */
  .annual-clues {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 35px; /* 增加间距 */

    .label {
      font-size: 25px; /* 放大 */
      margin-right: 20px; /* 增加间距 */
      font-weight: 500;
    }

    .digital-container {
      display: flex;
      align-items: center;
    }

    .digital {
      --height: 50px; /* 放大 */
      --width: 48px; /* 放大 */
      width: var(--width);
      height: var(--height);
      line-height: var(--height);
      margin: 0 3px; /* 增加间距 */
      border-radius: 3px;
      background: radial-gradient(189% 50% at 50% 50%, #0a1463, #090f27);
      -webkit-box-reflect: below 2px
        linear-gradient(
          transparent,
          transparent,
          transparent,
          rgba(0, 0, 0, 0.83)
        );
      text-align: center;
      font-weight: 700;
      font-size: 42px; /* 放大 */
      color: #fff;
      overflow: hidden;
      transition: all 0.3s ease-in-out;

      /* 分隔符样式 */
      &.separator {
        background: transparent;
        -webkit-box-reflect: none;
        color: #ffffff;
        font-weight: 400;
        margin: 0 1px;
      }
    }

    .unit {
      font-size: 25px; /* 放大 */
      margin-left: 20px; /* 增加间距 */
      font-weight: 500;
    }
  }

  /* 第二排：选题线索统计 - 重新设计布局 */
  .clues-statistics {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    max-width: 650px;
    margin-bottom: 30px;

    .stat-item {
      display: flex;
      align-items: center;
      position: relative;
      flex: 1;
      padding: 8px 0;

      .stat-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 8px; /* 数字和标签之间的间距 */
      }

      .stat-number {
        margin-left: 25px;
        margin-bottom: -10px;
        width: 100% !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;

        ::v-deep .digital-flop {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }

        ::v-deep text {
          filter: drop-shadow(0 0 8px currentColor);
          text-anchor: middle;
          dominant-baseline: middle;
        }

        ::v-deep svg {
          width: 100%;
          height: 100%;
        }
      }

      .stat-label {
        margin-left: 25px;
        font-size: 16px;
        color: #a6bed2;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
      }

      .divider {
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 60px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(24, 144, 255, 0.8),
          transparent
        );

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 4px;
          height: 4px;
          background: #1890ff;
          border-radius: 50%;
          box-shadow: 0 0 8px rgba(24, 144, 255, 0.8);
        }
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section2 {
    .annual-clues {
      .digital {
        --height: 40px;
        --width: 38px;
        font-size: 34px;

        &.separator {
          font-size: 34px;
        }
      }
    }

    .clues-statistics {
      .stat-item {
        .stat-number {
          height: 30px !important;
        }

        .stat-label {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
